<template>
    <div class="home-classic">
        <h2>经典歌单</h2>
      <!-- 滚动所需的容器 -->
      <div class="wrapper" ref="wrapper">
        <ul class="content" ref="content">
          <li v-for="(item, index) in listData" :key="index">
            <div class="cover">
              <van-image :src="item.cover_url_big" radius="1rem" />
              <span>{{ item.access_num  |  numFilter(1)}}万</span>
            </div>
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  import BScroll from "@better-scroll/core";//引入betterscroll
  export default {
    data() {
      return {
        listData: [],
      };
    },
    created() {
      this.getSongListData();
    },
    methods: {
      // 获取到推荐歌单的数据
      getSongListData() {
        this.$request("get", "/recommend/playlist",{
            id:59,
            pageNo:2,
            pageSize:10
        }).then((res) => {
          console.log(res);
          if (res.result == 100) {
            this.listData = res.data.list;
          }
          // console.log(this.listData);
          //异步数据的一些处理
          this.betterScrollHorizontal(this.listData.length,10);//调用横向滚动的方法
        });
      },
        // 封装一个横向滚动的方法
         /**
       * param num:个数
       * param itemWidth:列表项的宽度，单位是rem
       */
      betterScrollHorizontal(num, itemWidth) {
        this.$refs.content.style.width = num * itemWidth + "rem";
          this.$nextTick(() => {
            //wrapper为template中容器的ref，表示给那个元素来设置滚动
            this.scroll = new BScroll(this.$refs.wrapper, {
              scrollY: false, //关闭纵向滚动
              scrollX: true, //横向滚动
              startX: 0, //横向滚动的开始位置
            });
          });
        },
      },
    filters:{
      // 处理播放量的显示格式
      /**
       * param num:小数固定的位数
       * param value:处理的数值
       */
      numFilter(value,num){
        // 把小数位固定为num位
        return parseFloat(value/10000).toFixed(num)
      }
    }
    };
  </script>
  
  <style scoped>
  .cover > span {
    position: absolute; 
    right: 0.2rem;
    bottom: 0.4rem;
    background-color: brown;
    color:white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    display: inline-block;
  }
  .cover {
    position: relative;
  }
  .wrapper {
    width: 100%; /*容器的宽度就是屏幕的宽度*/
    overflow: hidden;
  }
   /*content内容区的宽度对于wrapper容器的宽度，12个列表项*/
  /* ul.content {
    width: calc(12 * 10rem);
  } */
  ul.content li {
    /*li默认四块级元素，修改为行内元素，但要具备块级元素的特性*/
    display: inline-block;
    width: 10rem;
    vertical-align: top; /*重置方向的位置*/
  }
  /* li里面有两个元素：div和span，所以使用通配符*  */
  ul.content li * {
    margin: 0.1rem; /*里面的元素与li边缘有个间距 */
  }
  ul.content li > span {
    font-size: 0.8rem;
    color: #54493b;
  }
  </style>